import { styled } from '@mui/material/styles'
import Card from './card'
import { Skeleton } from '@mui/material'
import Pagination, { DEFAULT_ITEMS_PER_PAGE } from './pagination'
import Sorting from './sorting'
import { ImageType } from './image'
import { useAppSelector } from '../../store/hooks'
import {
	selectCatalog,
	selectCatalogPending,
} from '../../store/reducers/selectors'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'row',
	width: '992px',
	height: 'auto',
	gap: '15px',
	flexWrap: 'wrap',
}))

const CardList = () => {
	const pending = useAppSelector(selectCatalogPending)
	const catalogData = useAppSelector(selectCatalog)

	const skeletonItems = Array.from(
		{ length: DEFAULT_ITEMS_PER_PAGE },
		(_, i) => i + 1
	)

	return (
		<StyledContainer>
			<Sorting />
			{pending &&
				skeletonItems.map((item) => (
					<Skeleton key={item} variant='rounded' width={236} height={359} />
				))}
			{catalogData?.map(
				({ _id, pictures, discount, price, wight, name, likes }) => (
					<Card
						key={_id}
						_id={_id}
						pictures={pictures}
						discount={discount}
						discountPrice={price * (1 - discount / 100)}
						price={price}
						wight={wight}
						name={name}
						likes={likes}
						type={ImageType.cardList}
					/>
				)
			)}
			<Pagination />
		</StyledContainer>
	)
}
export default CardList
